<div class="form-group row" [formGroup]="parentFormGroup">
  <label class="col-sm-3 col-form-label">
    {{data.label}}: <span class="required" *ngIf="data?.required">*</span>
  </label>
  <div class="col-sm-9">
    <div class="input-group input-group-sm">
      <ng-container [ngSwitch]="true">
        <ng-container *ngSwitchCase="mode == MODES.View">
          <div class="form-control text-left overflow-auto" readonly>
            <ng-container *ngIf="refObject != null">
              <i class="{{refObject?.type_information?.icon}}"></i> {{refObject?.type_information?.type_label}}
              #{{refObject?.object_information?.object_id}}
              <span *ngFor="let sum of refObject?.summaries; let last = last; let first = first">
                <ng-template [ngIf]="sum.type != 'date'" [ngIfElse]="templateDate">
                  <span *ngIf="first"> - </span>{{sum.value}}
                </ng-template>
                <ng-template #templateDate>
                  <span *ngIf="first"> - </span>{{(sum.value && sum.value.$date)? (sum.value.$date | date:"dd/MM/yyyy") : " - "}}
                </ng-template>
                <span *ngIf="!last"> | </span>
              </span>
            </ng-container>
            <ng-container *ngIf="refObject == null"> No reference set </ng-container>
          </div>
          <div class="input-group-append">
            <span class="input-group-text">
              <a  [class.ref-disabled]="!controller.value"
                [routerLink]="'/framework/object/view/'+ controller.value">
                <fa-icon icon="arrow-right"></fa-icon>
              </a>
            </span>
          </div>
        </ng-container>
        <ng-container *ngSwitchCase="mode == MODES.Create || mode == MODES.Edit || mode == MODES.Bulk">
          <ng-container *ngIf="mode == MODES.Bulk">
            <cmdb-object-bulk-input-appends [data]="data"
                                            [mode]="mode"
                                            [parentFormGroup]="parentFormGroup" ></cmdb-object-bulk-input-appends>
          </ng-container>
          <ng-select
            [items]="objectList"
            id="ng-select-valid"
            class="custom-select"
            bindValue="object_information.object_id" [searchFn]="searchRef"
            [ngClass]="{ 'is-valid': controller.valid && (controller.dirty || controller.touched),
            'is-invalid': controller.invalid && (controller.dirty || controller.touched)}"
            [formControlName]="data.name">
            <ng-template ng-label-tmp let-item="item">
              <ng-container *ngIf="item.object_information == null">
                <ng-container *ngIf="refObject != null">
                  <i class="{{refObject?.type_information?.icon}}"></i> {{refObject?.type_information?.type_label}}
                  #{{refObject?.object_information?.object_id}}
                  <span *ngFor="let sum of refObject?.summaries; let last = last; let first = first">
                    <ng-template [ngIf]="sum.type != 'date'" [ngIfElse]="templateDate">
                      <span *ngIf="first"> - </span>{{sum.value}}
                    </ng-template>
                    <ng-template #templateDate>
                      <span *ngIf="first"> - </span>{{(sum.value  && sum.value.$date)? (sum.value.$date | date:"dd/MM/yyyy") : " - "}}
                    </ng-template>
                    <span *ngIf="!last"> | </span>
                  </span>
                </ng-container>
                <ng-container *ngIf="refObject == null"> No reference set </ng-container>
              </ng-container>
              <ng-container *ngIf="item.object_information != null">
                <i class="{{item?.type_information?.icon}}"></i> {{item?.type_information?.type_label}}
                 #{{item?.object_information?.object_id}}
                <span *ngFor="let sum of item?.summaries; let last = last; let first = first">
                  <ng-template [ngIf]="sum.type != 'date'" [ngIfElse]="templateDate">
                    <span *ngIf="first"> - </span>{{sum.value}}
                  </ng-template>
                  <ng-template #templateDate>
                    <span *ngIf="first"> - </span>{{(sum.value && sum.value.$date)? (sum.value.$date | date:"dd/MM/yyyy") : " - "}}
                  </ng-template>
                  <span *ngIf="!last"> | </span>
                </span>
              </ng-container>
            </ng-template>
            <ng-template ng-option-tmp let-item="item" let-index="index">
              <i class="{{item?.type_information?.icon}}"></i> {{item?.type_information?.type_label}}
              # {{item?.object_information?.object_id}}
              <span *ngFor="let sum of item?.summaries; let last = last; let first = first">
                <ng-template [ngIf]="sum.type != 'date'" [ngIfElse]="templateDate">
                  <span *ngIf="first"> - </span>{{sum.value}}
                </ng-template>
                <ng-template #templateDate>
                  <span *ngIf="first"> - </span>{{(sum.value && sum.value.$date)? (sum.value.$date | date:"dd/MM/yyyy") : " - "}}
                </ng-template>
                <span *ngIf="!last"> | </span>
              </span>
            </ng-template>
          </ng-select>
          <cmdb-input-appends [data]="data" [mode]="mode" [parentFormGroup]="parentFormGroup"></cmdb-input-appends>
        </ng-container>
        <div *ngSwitchDefault>
          <cmdb-mode-error></cmdb-mode-error>
        </div>
      </ng-container>
      <div *ngIf="controller.invalid && (controller.dirty || controller.touched)" class="invalid-feedback">
        <div class="float-right" *ngIf="controller.errors.required">
          {{data.label}} is a required field.
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <small class="description form-text text-muted">{{data?.description}}</small>
  </div>
</div>
